import { Toast, List, InputItem, WhiteSpace, Picker, Switch, Button, Flex, PickerView } from 'antd-mobile';
import { createForm } from 'rc-form';
import { Setting } from './Setting';
import 'whatwg-fetch'
import GetValiCode from './FormItem-GetValiCode';

function failToast(mesage) {
  Toast.fail(mesage, 2);
}

const cardType  = [{value:'1',label:'居民身份证'},{value:'3',label:'港澳台身份证'}];

class RegisterComponentT extends React.Component {
  state = {
    focused: false,
    form: {
      username: {
        valid: /[@#\$%\^&\*]+/g
      },
      password: {
        valid: false
      },
      email: {
        valid: /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/
      },
      mobile: {
        valid: /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
      },
      is_read: {
        valid: false
      }
    }
  };

  handClick = () => {
    let validData = true;
    for( var name in this.state.form){
      let text = this.props.form.getFieldValue(name) || '' ,
          reg = this.state.form[name].valid;
      switch ( name )
      {
        case 'username':
          if( reg.test(text) ){
            Toast.fail( '用户名包含非法字符', 2 );
            validData = false;
          }else if( text.length < 2 ){
            Toast.fail( '用户名长度小于2位', 2 );
            validData = false;
          }
          break;
        case 'email':
          if (text.length > 0 && !reg.test(text)) {
            Toast.fail( '请输入正确的邮箱地址', 2 );
            validData = false;
          }
          break;
        case 'password':
          if( text.length == 0 ){
            Toast.fail( '请密码不能为空', 2 );
            validData = false;
          }
          break;
        case 'is_read':
          if( !text ){
            Toast.fail( '请同意协议', 2 );
            validData = false;
          }
          break;
        case 'mobile':
          if( text.length == 0 ){
            Toast.fail( '手机号不能为空', 2 );
            validData = false;
          } else if (!reg.test(text)) {
            Toast.fail( '请输入正确的手机号', 2 );
            validData = false;
          }
          break;
        case 'code':
          if( text.length == 0 ){
            Toast.fail( '验证码不能为空', 2 );
            validData = false;
          }
          break;
      };
    };

    if( !validData )return false;

    var form = document.getElementById('registerForm');
    console.log(form)
    fetch( Setting.BaseUrl + "register" , {
      method: 'POST',
      headers: {
          // 'Content-Type': 'application/json'
      },
      body: new FormData(form)
      }).then( function( resp) {
        return resp.json();
      }).then( function( json){
        if( json.success ){
          Toast.info('注册成功', 2, () => {
             window.location.href = "/";
          })
      }else{
        Toast.fail( json.error, 2 );
      };
    })

  };

  valiClickHandle = (phoneNum) => {
    fetch( Setting.BaseUrl + "register-vcode", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({mobile: phoneNum})
    }).then((resp) => {
      return resp.json();
    }).then((json) => {
      console.log('valiClickHandle')
      if (json.success) {
        console.log('验证码已发送')
      } else {
        console.error(json.error);
      }
    })
  }

  render() {
    const { getFieldProps } = this.props.form;
    const { valiCD } = this.state;
    return (
      <div className="login-div">
        <form id="registerForm">
 		    <List>
          <InputItem
            placeholder="用户名"
            maxLength="12"
            {...getFieldProps('username')}
            name="username"
          ></InputItem>
        </List>
        <WhiteSpace />

 		    <GetValiCode
          form={this.props.form}
          valiClick={this.valiClickHandle}/>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder="安全邮箱"
            {...getFieldProps('email')}
            name="email"
          ></InputItem>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder="密码"
            type="password"
            {...getFieldProps('password')}
            name="password"
          ></InputItem>
        </List>
        <WhiteSpace />

        <List>
          <InputItem
            placeholder="密码确认"
            type="password"
            {...getFieldProps('password_confirmation')}
            name="password_confirmation"
          ></InputItem>
        </List>
        <WhiteSpace />

        <List>
          <List.Item multipleLine={true} wrap={true}
            extra={<Switch
              name="is_read"
              {...getFieldProps('is_read', {
                initialValue: false,
                valuePropName: 'checked',
              })}
            />}
          >我确认手机号正确填写，并已牢记用户名和密码</List.Item>
        </List>
        </form>
        <WhiteSpace size="xl" />
        <Button className="btn" type="primary" onClick={this.handClick}>注册</Button>
      </div>

    );
  }
}

const RegisterComponent = createForm()(RegisterComponentT);
export default RegisterComponent
